var MaterialDetail = function () {
  var template = /* html */ `
    <div class="material-detail" v-loading.fullscreen.lock="loading">
      <div class="material-detail-img-div">
        <imgs-preview :imgs="materialForm.imgUrls"></imgs-preview>
      </div>
      <div class="material-detail-content">
        <div class="material-detail-title">
          {{materialForm.materialName}}
        </div>
        <div class="form-item material-detail-price clearfix">
          <div class="label">价格</div>
          <div class="price" v-if="material.unitPrice">
            <span style="font-size:18px;margin-right:4px">¥</span>
            <span style="font-size:24px;font-weight:bolder">{{materialForm.unitPrice.toFixed(2)}}</span>
          </div>
        </div>
        <div class="form-item clearfix">
          <div class="label">规格</div>
          <div class="text">{{materialForm.model}}</div>
        </div>
        <div class="form-item clearfix">
          <div class="label">编号</div>
          <div class="text">
            <span v-if="materialForm.color.trim()!==''">{{materialForm.color}}</span>
            <span v-else>无</span>
          </div>
        </div>
        <div class="form-item clearfix">
          <div class="label">描述</div>
          <div class="text">
            <span v-if="materialForm.colorDescription.trim()!==''">{{materialForm.colorDescription}}</span>
            <span v-else>无</span>
          </div>
        </div>
        <div class="form-item clearfix" v-if="materialForm.material!==''">
          <div class="label">材质</div>
          <div class="text">
            <span>{{materialForm.material}}</span>
          </div>
        </div>
        <div class="form-item clearfix">
          <div class="label">商家</div>
          <div class="text">
            <span v-if="materialForm.providerName!==''">{{materialForm.providerName}}</span>
            <span v-else>无</span>
          </div>
        </div>
        <div class="form-item clearfix" v-if="materialForm.providerNo!==''">
          <div class="label">我司编号</div>
          <div class="text">
            <span >{{materialForm.providerNo}}</span>
          </div>
        </div>
        <div class="form-item clearfix">
          <div class="label">采购数量</div>
          <div>
            <el-input-number style="width:150px" is-decimal-zero size="small" v-model="purchaseCount" :min="0"  :precision="precision"
              controls-position="right"></el-input-number>
            <span>{{materialForm.unit}}</span>
            <span v-if="materialForm.count" style="margin-left:20px;color:#FF0036">(已有库存数{{materialForm.count}}{{materialForm.unit}})</span>
          </div>
        </div>
        <div class="form-btns clearfix" v-if="hasHandle">
          <div class="ensure" @click="purchaseMaterial">立即采购</div>
          <div class="import" @click="importMaterial">导入物料</div>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      material: {
        type: Object,
        required: true
      },
      hasHandle:{
        type:Boolean,
        default:false
      }
    },

    data: function () {
      var material = this.material;
      material = new MaterialModel(material);

      var precision = SysUtil.getMaterialNumberPrecision(material.unit, 4);
      return {
        loading: false,
        materialForm: material,
        purchaseCount: material.count,
        precision: precision
      };
    },

    methods: {
      purchaseMaterial: function () {
        var purchaseCount = this.purchaseCount;
        if (purchaseCount === undefined) {
          this.$alert('请输入采购数量', '信息');
          return;
        }

        if (purchaseCount === 0) {
          this.$alert('采购数量不能为0', '信息');
          return;
        }

        var material = this.materialForm;
        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/purchaseShoppingCallMaterial', {
          id: material.id,
          purchaseCount: purchaseCount
        }).then(function () {
          self.loading = false;
          self.$alert('该物料采购成功', '信息');
        }).catch(function () {
          self.loading = false;
        });
      },

      importMaterial: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/importShoppingMaterialToMyCompany', {
          id: this.materialForm.id
        }).then(function () {
          self.loading = false;
          self.$alert('该物料成功导入', '信息');
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      ImgsPreview: ImgsPreview
    },

    template: template
  };
}();
